<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let waterMaskDiv = null;
    function createWaterMask() {
        let canvas = document.createElement('canvas')
        canvas.id = '__canvas'
        canvas.width = '180' // 每个水印的宽高
        canvas.height = '150'
        let ctx = canvas.getContext('2d')
        ctx.fillStyle = 'rgba(150, 150, 150, 0.5)'
        ctx.rotate((25 * Math.PI) / 180) // 偏转的角度
        ctx.fillText('originDu?', 30, 20)  // 绘制文本 绘制开始位置

        let src = canvas.toDataURL('image/png')

        // 水印容器
        waterMaskDiv = document.createElement('div')

        waterMaskDiv.style.position = 'fixed'
        waterMaskDiv.style.zIndex = '-1'
        waterMaskDiv.id = '__water-mark'
        waterMaskDiv.style.top = '0'
        waterMaskDiv.style.left = '0'
        waterMaskDiv.style.height = '100%'
        waterMaskDiv.style.width = '100%'
        waterMaskDiv.style.pointerEvents = 'none'
        waterMaskDiv.style.backgroundImage = 'URL(' + src + ')'
        // 水印节点插到body下 可以通过层级控制节点层次
        document.body.appendChild(waterMaskDiv)
    }

    createWaterMask();

    // 禁止修改水印节点
    let targetNode = document.querySelector('#__water-mark')
    let config = {
        childList: true,
        attributes: true,
        subtree: true,
    }

    const mutationCallback = mutationList => {
        for (let mutation of mutationList) {
            for (let dom of mutation.removedNodes) {
                if(dom===waterMaskDiv){
                    console.log('水印被删除')
                    createWaterMask();
                    return;
                }
            }
            // 修改
            if(mutation.target===waterMaskDiv){
                console.log('水印被修改')
                createWaterMask();
                return;
            }
        }
    }

    // 创建 MutationObserver 实例
    let observer = new MutationObserver(mutationCallback)

    // 开始监控目标节点
    observer.observe(document.body, config)

    // 停止监控
    // observer.disconnect()
</script>

</html>